import React from 'react';
import Title from '../Title';
import './index.scss';
import { createContext } from 'react';

export const TabContext = createContext();

export default function TabHeader({ tabs, currentTab, setCurrentTab, primaryColor, data }) {
    return (
        <>
            <div className="flex-center tab-header">
                <div className="flex-between tab-container">
                    {tabs.map((tab, index) => (
                        <div
                            key={index}
                            className="flex-center tab-item"
                            onClick={() => {
                                if (tab.name === "订购流程") {
                                    window.scrollTo({
                                        top: document.body.scrollHeight,
                                        behavior: "smooth"
                                    })
                                } else {
                                    setCurrentTab(tab)
                                }
                            }}
                        >
                            <span
                                style={
                                    currentTab.name === tab.name
                                        ? { color: primaryColor, fontWeight: 600 }
                                        : { color: "black" }
                                }
                            >
                                {tab.name}
                            </span>
                        </div>
                    ))}
                </div>
            </div>
            {currentTab.name !== "订购流程" && (
                <div className="tab-main">
                    <Title title={currentTab.name} />
                    <TabContext.Provider value={data}>
                        {currentTab.component}
                    </TabContext.Provider>
                </div>
            )}
        </>
    );
} 